<template>
	<view class="container">
		<view class="share-pro-mask" v-if="reimburse"></view>
		<view class="bg">
			<!-- <form @submit="formSubmit" @reset="formReset"> -->
				<!-- <tui-list-cell :hover="false" class="tui-list-cell tui-list-cell-people">
					<view class="tui-line-cell">
						<view class="case_box_des">
							<view class="case_box_name "> 
								收款人				
							</view>
							<view class="case_box_right">
								<input @input="oninput_text" placeholder-style="color:#999999" placeholder="请输入绑定微信支付的实名" :value="cardholder" class="tui-input-people" name="cardholder" value="" maxlength="50" type="text"/>
							</view>
						</view>
					</view>
				</tui-list-cell>	 -->
				<tui-list-cell :hover="false" class="tui-list-cell tui-list-cell-bg">
					<view class="tui-line-cell">
						<view class="tui-title withdraw-title">提现金额</view>
						<view class="case_box_des" style="border-bottom: 0.5px solid #CCCCCC;padding-bottom: 20rpx;">
							<view class="case_box_fuhao"> 
								￥					
							</view>
							<view class="case_box_right" style="font-weight: 500;margin-left: 10rpx;">
								<!-- :value="toAmount(balanceInfo.balance)" -->
								<input style="font-size: 80rpx !important;" @input="oninput" maxlength="8" placeholder="0.00"  min="0" v-model="amountFee" class="tui-input" name="amount" type="digit" placeholder-style="color:#000"/>
							</view>
						</view>
						<view class="withdraw-tips">
							当前可提现金额￥{{toAmount(balanceInfo.deposit)}} <text v-if="balanceInfo.freeze_amount!=0">（冻结金额 {{toAmount(balanceInfo.balance - balanceInfo.deposit)}}）</text><text class="header-tip" @tap="allAmount()">全部提现</text>
						</view>
					</view>
				</tui-list-cell>
				<tui-list-cell v-if="bankcard" class="tui-list-cell tui-list-cell-people" style="height: 180rpx !important;line-height: 65rpx !important;">
					<view class="tui-line-cell" @click="details('./select')">
						<view class="case_box_des">
							<view class="case_box_right" style="font-weight: 400;font-size: 30rpx;color: #CCC;">
								<view class="list_tops">
									<view class="name_networkList" style="color: #999 !important;"><span style="color: #666;margin-right: 20rpx;">提现到   </span>{{tx_monicker(bankcard.cardholder)}}</view>
								</view>
								<view class="list_bottom">
									<view class="address_networkList" style="color: #999 !important;">{{tx_bankcard(bankcard.card_no)}}</view>
								</view>
							</view>
							<view class="tui-list-cell-name"><image style="width: 20rpx;height: 30rpx;" src="../../static/my/Combined Shape.png"></image></view>
							<view class="tui-right" @tap="openActionSheet(0)">{{typename}}</view>
						</view>
					</view>
				</tui-list-cell>
				<tui-list-cell v-else class="tui-list-cell tui-list-cell-people">
					<view class="tui-line-cell" @click="add_bankcard()">
						<view class="case_box_des">
							<view class="case_box_right" style="font-weight: 400;font-size: 30rpx;color: #CCC;">
								请添加提现的银行卡
							</view>
							<view class="tui-list-cell-name"><image style="width: 20rpx;height: 30rpx;" src="../../static/my/Combined Shape.png"></image></view>
							<view class="tui-right" @tap="openActionSheet(0)">{{typename}}</view>
						</view>
					</view>
				</tui-list-cell>
				<view class="tui-btn-box">
					<!-- <button class="btn-primary btnPrimary" disabled v-if="amountFee == 0" hover-class="false" formType="submit">确 定</button>
					<button class="btn-primary" v-else hover-class="false" formType="submit">确 定</button> -->
					
					<button class="btn-primary btnPrimary" disabled v-if="amountFee == 0" hover-class="false" @click="formSubmit(amountFee)">提 现</button>
					<button class="btn-primary" v-else hover-class="false" @click="formSubmit(amountFee)">提 现</button>
					
				</view>
	<!-- 			<view class="tui-btn-box">
					<view class="btn-detailed" >收支明细</view>
				</view> -->
			<!-- </form> -->
		</view>
		<view class="header">
			<view class="title">温馨提示</view>
			<view class="sub-title" style="margin-bottom: 15rpx;"><view class="tui-badge-dot tui-blue"></view>仅支持提现到实名认证本人名下借记卡，当前提现到账周期为D+0，正常情况下实时到账。</view>
			<view class="sub-title" style="margin-bottom: 15rpx;"><view class="tui-badge-dot tui-blue"></view>每次提现金额需要≥{{toAmount(balanceInfo.deposit_card_min_limit)}}元，最大提现金额{{toAmount(balanceInfo.deposit_card_max_limit)}}元，每日可提现{{balanceInfo.deposit_day_card_max_count}}次，每日限额{{toAmount(balanceInfo.deposit_day_card_max_limit)}}元。</view>
			<view class="sub-title"><view class="tui-badge-dot tui-blue"></view>每次提现需要收取{{balanceInfo.deposit_card_fee_rate/1000}}%手续费</view>
			<view class="sub-title"><view class="tui-badge-dot tui-blue"></view>提现有时可能需要等待，如有疑问可
			<tui-icon name="kefu" size="20" color="#0a8fe2"></tui-icon><button open-type="contact" session-from="weapp" class="tui-btn" :data-id="index">咨询客服</button>
			
			</view>
			<view class="sub-title"><view class="tui-badge-dot tui-blue"></view>了解更多信息请阅读 <text class="header-tip" @tap="details('../index/new_file?id=用户服务协议')">《用户协议》</text>。</view>
		</view>
		
		<!--toast提示-->
		<tui-toast ref="toast"></tui-toast>
		<!--toast提示-->
	</view>
</template>

<script>
	const form = require("../../components/utils/formValidation.js")
	import tuiButton from "@/components/button/button"
	import tuiBadge from "@/components/badge/badge"
	import tuiIcon from "@/components/icon/icon"
	import tuiToast from "@/components/extend/toast/toast"
	
	export default {
		components: {
			tuiButton,
			tuiBadge,
			tuiIcon,
			tuiToast,
		},
		data() {
			return {
				balanceInfo: {balance:0,deposit_card_max_limit:0,deposit:0,freeze_amount:0},
				amountFee: 0,
				cardholder: '',
				reimburse: false,
				bankcard: false,
			}
		},
		onLoad:function() {
			this.loadData();
		},
		onShow: function(){
			// this.cardholder = uni.getStorageSync('cardholder');
			console.log(uni.getStorageSync('bankcard'));
			if(uni.getStorageSync('bankcard')){
				console.log('有值')
				this.bankcard = uni.getStorageSync('bankcard');
			}else{
				this.bankcard = false;
			}
		},
		methods: {
			tx_bankcard: function(e){
				if(e){
					var sun = e.split('').length - 8;
					if(sun == 4){
						var asterisk = '****';
					}else if(sun == 5){
						var asterisk = '*****';
					}else if(sun == 6){
						var asterisk = '******';
					}else if(sun == 7){
						var asterisk = '*******';
					}else if(sun == 8){
						var asterisk = '********';
					}else if(sun == 9){
						var asterisk = '*********';
					}else if(sun == 10){
						var asterisk = '**********';
					}else if(sun == 11){
						var asterisk = '***********';
					}else if(sun == 12){
						var asterisk = '************';
					}
					
					return e.substr(0,4)+' '+ asterisk +e.substr(e.split('').length - 4,e.split('').length);
				}else{
					return false;
				}
			},
			tx_monicker: function(e){
				if(e){
					return e.substr(0,0)+'*'+e.substr(1,e.split('').length);
				}else{
					return false;
				}
			},
			oninput: function(e){
				// var valuenum = e.detail.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');
				// valuenum = valuenum.replace(/^(00|0\d)/,'');
				
				var goods_price_fen = e.detail.value.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符
				goods_price_fen = goods_price_fen.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
				goods_price_fen = goods_price_fen.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				goods_price_fen = goods_price_fen.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数
				if (goods_price_fen.indexOf(".") < 0 && goods_price_fen != "") { //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
					goods_price_fen = parseFloat(goods_price_fen);
				}
				
				setTimeout(() => {
					this.amountFee = goods_price_fen;
				}, 100);
			},
			oninput_text: function(e){
				setTimeout(() => {
					this.cardholder = e.detail.value;
				}, 100);
			},
			allAmount: function(){
				let that = this;
				that.amountFee= that.toAmount(this.balanceInfo.deposit);
			},
			loadData: function(){
				let that = this;
				that.tui.request('user/account', {}).then((res) => {
					that.balanceInfo = res;
					that.amountFee= that.toAmount(res.deposit);
				}).catch((err) => {
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					that.$refs.toast.show(params);
				})
				
			},
			toAmount: function(amount){
				let fee = this.tui.centsToYuan(amount);
				return fee.toFixed(2)
			},
			// 整合方法
			alwaysjudge: function(formData,cardholder,data){
				var thal = this;
				// if(thal.estimate() == true){
				// 	// thal.formSubmit(etyope);
				// 	thal.Successful(formData,cardholder,data);
				// }else{
					thal.sendMsg(formData,cardholder,data);
				// }
				
			},
			// 是否已订阅
			estimate:function(){
				//判断是否已经订阅
				wx.getSetting({
					withSubscriptions : true,
					success(res) {
						console.log(res);
						if(res.subscriptionsSetting){
							let itemSettings = res.subscriptionsSetting.itemSettings;
							if (itemSettings['OiSGa7_vtu-67POeeWQLcy0Tvz8uzH3XRhWaw3Hs22k']) {
								if (itemSettings['OiSGa7_vtu-67POeeWQLcy0Tvz8uzH3XRhWaw3Hs22k'] == 'accept') {
									return true;
								}else{
									return false;
								}
							}else{
								return false;
							}
						}else{
							return false;
						}
					}
				})
			},
			// 订单发货订阅消息
			sendMsg:function(formData,cardholder,data){
			    var thal = this
				var etyope = etyope;
			    wx.requestSubscribeMessage({
			      tmplIds: ["OiSGa7_vtu-67POeeWQLcy0Tvz8uzH3XRhWaw3Hs22k"],
			      success(res) {
			        console.log('测试消息提醒',res)
			        if (res["OiSGa7_vtu-67POeeWQLcy0Tvz8uzH3XRhWaw3Hs22k"] == 'accept') {
						// thal.formSubmit(etyope);
						thal.Successful(formData,cardholder,data);
			        }else{
						// thal.formSubmit(etyope);
						thal.Successful(formData,cardholder,data);
					}
			      },
			      fail(err) {
			        //失败
					thal.Successful(formData,cardholder,data);
			        console.error(err);
			      }
			    });
			},
			Successful: function(formData,cardholder,data){
				let that = this;
				// uni.setStorageSync('cardholder',cardholder);
				let params = {
					title: "操作成功",
					imgUrl: "/static/toast/check-circle.png",
					icon: true
				};
				that.$refs.toast.show(params);
				that.reimburse = false;
				setTimeout(() => {
					uni.navigateTo({
					   url: './budgetDetails?deposit_id='+data,
					});
				}, 200);
			},
			formSubmit: function(e) {
				//表单规则
				let that = this;
				that.reimburse = true;
				let rules = [
				{
					name: "cardholder",
					rule: ["required",],
					msg: ["请填写银行卡信息"]
				},
				{
					name: "amount",
					rule: ["required", "isAmount"],
					msg: ["请填写提现金额", "请填写正确的金额"]
				}
				];
				//进行表单检查
				
				let formData = {
					bankcard:that.bankcard,
					amount:e
				};
				console.log(formData);
				if(!that.bankcard || that.bankcard == ''){
					that.reimburse = false;
					let params = {
						title: "请填写银行卡信息",
						imgUrl: "/static/toast/info-circle.png",
						icon: true
					};
					that.$refs.toast.show(params);
					return false
				}
				
				// console.log(formData);
				// let checkRes = form.validation(formData, rules);
				if (formData) {
					let min = that.tui.centsToYuan(that.balanceInfo.deposit_card_min_limit);
					let max = that.tui.centsToYuan(that.balanceInfo.deposit_card_max_limit);
					if(formData.amount < min){
						that.reimburse = false;
						let params = {
							title: "最低提现金额"+ min +'元',
							imgUrl: "/static/toast/info-circle.png",
							icon: true
						};
						that.$refs.toast.show(params);
						return false
					}
					
					if(formData.amount > max){
						that.reimburse = false;
						let params = {
							title: "超出最大提现金额"+max+'元',
							imgUrl: "/static/toast/info-circle.png",
							icon: true
						};
						that.$refs.toast.show(params);
						return false
					}
		
					that.tui.request('user/deposit', {
						deposit_type:2,
						cardholder: formData.bankcard.cardholder,
						amount: this.tui.yuanToCents(formData.amount),
						card_id: formData.bankcard.card_id
					}).then((res) => {
						if(res.code == '0000'){
							if(typeof wx.requestSubscribeMessage === 'function'){
								that.alwaysjudge(formData,formData.bankcard.cardholder,res.data);
							}else{
								wx.showModal({
									title: '提示！',
									content: '微信版本过低，订阅功能无法使用哦！',
									success(res_versions) {
										if (res_versions.confirm) {
											that.Successful(formData,formData.bankcard.cardholder,res.data);
										} else if (res_versions.cancel) {
											that.Successful(formData,formData.bankcard.cardholder,res.data);
										}
									}
								})
							}
						}else{
							that.reimburse = false;
							let params = {
								title: res.msg,
								imgUrl: "/static/toast/info-circle.png",
								icon: true
							};
							that.$refs.toast.show(params);
						}
					}).catch((err) => {
						that.reimburse = false;
						let params = {
							title: "服务器异常",
							imgUrl: "/static/toast/fail-circle.png",
							icon: true
						};
						that.$refs.toast.show(params);
					})
					
					

				} else {
					that.reimburse = false;
					let params = {
						title: '请填写银行卡信息',
						imgUrl: "/static/toast/info-circle.png",
						icon: true
					};
					that.$refs.toast.show(params);
				}
			},
			details: function(url){
				if(!url){
					return false;
				}
				uni.navigateTo({
					url: url
				})
				
			},
			add_bankcard : function(){
				this.tui.request('user/cardList',{}).then((res) => {
					if(res.code == '0000'){
						if(res.data.length <= '0'){
							uni.navigateTo({
								url: './bankcard'
							})
						}else{
							uni.navigateTo({
								url: './select'
							})
						}
					}else{
						uni.navigateTo({
							url: './select'
						})
					}
				}).catch((err) => {
					let params = {
						title: "服务器异常",
						imgUrl: "/static/toast/fail-circle.png",
						icon: true
					};
					this.$refs.toast.show(params);
				})
			},
		}
	}
</script>

<style>
	@import '../../static/style/thorui.css';
	.container {
		box-sizing: border-box;
	}
	.bg{
		padding: 40rpx 30rpx 20rpx 30rpx;	
		background: #FFFFFF;
	
	}
	.header {
		padding: 80rpx 30rpx 60rpx 30rpx;
		box-sizing: border-box;
	}
	
	.title {
		font-size: 34rpx;
		color: #000;
		font-weight: 500;
		padding-bottom: 20rpx;
	}
	.sub-title {
		font-size: 24rpx;
		color: #999999;
		padding-left: 18rpx;
	}
/* 	.balance-title{
		font-size: 30rpx;
		font-weight: 400;
		margin: 30rpx auto;
		color: #000000;
	} */
	.tui-list-cell{
		margin: 30rpx auto;
		padding: 0rpx 30rpx !important;
	}
	.tui-list-cell-bg{
		border-radius: 15rpx;
		background: #f7f7f7;
	}
	.phcolor{
		color: #000 !important;
	}
/* 	.tui-btn-bloc{
		background: #0A8FE2 !important;
	} */
	.btn-primary {
		border-radius: 17rpx !important;
		background: #0A8FE2 !important;
		font-size: 34rpx !important;
		font-weight: 500;
		height: 110rpx !important;
		line-height: 110rpx !important;
	}
	.tui-btn-box{
		/* margin: 60rpx auto; */
		margin-bottom: 40rpx;
		margin-top: 90rpx;
	}
/* 	.btn-detailed{
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 28rpx;
		color: #0A8FE2;
		
	} */
	.header-tip{
		color: #0A8FE2;
		padding-left: 10rpx;
	}
	.tui-btn {
		background: none;
		padding: 0;
		margin: 0;
		display: inline;
		/* background: red; */
		height: 24rpx;
		font-size: 24rpx;
		color: #0A8FE2;
	}
	.tui-badge-dot{
		background: #999999 !important;
		margin-right: 10rpx !important;
		height: 12rpx !important;
		width: 12rpx !important;
	}
	.tui-input{
		height: 100rpx !important;
		font-size: 50rpx !important;
		/* background: red !important; */
	}
	.tui-input-people{
		font-size: 30rpx;
	}
	.tui-list-cell::after {
		border-bottom: 1rpx solid #FFFFFF;
	}
	.withdraw-tips{
		font-size: 26rpx;
		color: #999999;
		padding-right: 10rpx;
		line-height: 120rpx;
	}
	.withdraw-title{
		color: #999999 !important;
		margin-top: 30rpx ;
		margin-bottom: 70rpx;
		font-size: 30rpx;
		
	}
	.withdraw-amat{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.case_box_des {
		width: 100%;
		/* padding: 10rpx 20rpx; */
		padding: 30upx 0upx;
		margin: 10rpx auto;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 25rpx;
	}

	.case_box_fuhao{
		padding-left: 5rpx;
		color: #000000;
		font-size: 36rpx;
		margin-top: 38rpx;
	}
	.case_box_name{
		font-size: 30rpx;
		min-width: 90rpx;
		color: #999999;
		padding-right: 10rpx;
	}

	.case_box_right{
		font-weight: 550;
		width: 100%;
	}
	.tui-list-cell-people{
		height: 100rpx;
		border-radius: 10rpx;
		background: #f7f7f7 !important;
	}
	.btnPrimary{
		background: #CCCCCC !important;
		color: #FFFFFF !important;
	}
	.tui-line-cell{
		width: 100%;
	}
	.share-pro-mask{
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9999 !important;
	}
</style>
